.protonLoader {
    position: fixed;
    z-index: 99999;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(32px);
    margin-left: -($pm_loading / 2);
    width: $pm_loading;
    height: $pm_loading;
    background: $white;
    border-radius: $pm_loading;
    box-shadow: 1px 1px 3px rgba($border, 0.33), 0 0 2px rgba($border, 0.33);
    opacity: 0;
    transition: opacity .5s linear, transform .5s linear;
    animation-delay: 1.2s;
    will-change: transform;

    &::after {
        position: absolute;
        content:"";
        width: 100%;
        height: 100%;
        top:0px;
        left: 0px;
        border-radius: 50%;
        border: 5px solid #f2f2f2;
        border-top-color: $primary;
        animation: load8 1s infinite linear;
        will-change: transform;
    }

    &.show {
        transform: translateY(35px);
        opacity: 1;
    }

    .protonLoaderIcon { transform: scale(1.1) }

}

.protonLoader:not(.show) { z-index: -1 }
.protonLoader:not(.show)::after { display: none }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.protonLoader {
		border: 0;
		background-size: contain;
        background-color: #FFF;
        box-shadow: 1px 1px 3px rgba(0,0,0,.33), 0 0 2px rgba(0,0,0,.33);
		background-position: center;
		background-image:url(assets('img/loaders/small-spinner.gif'));
	}
    .protonLoader:after,
    .protonLoaderIcon {
        animation:none;
        display: none;
    }
}
